<template>
	<div class="aid">
		<div class="base">
			<p class="fixed-top">
				{{ JSON.stringify(text) == '{}' ? '添加管理员' : '修改管理员' }}
				<a-icon @click="closeFunction" type="close" />
			</p>
			<div class="main" id="new_message">
				<a-form :form="form">
					<a-form-item label="学号/工号">
						<a-select showSearch optionFilterProp="children" style="width: 100%" :disabled="currentID?true:false"
						v-decorator="['UserNo', { rules: [{ required: true, message: '请选择人员' }] }]"
						 @search="fetchUser" :filterOption="filterOption">
							<a-select-option v-for="(item, index) in userList" :key="item.UserNo">{{ item.UserNo }}&nbsp;|&nbsp;{{ item.Name }}</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item label="角色">
						<a-select optionFilterProp="children" mode="multiple" 
						 v-decorator="['RoleID1', { rules: [{ required: true, message: '请选择角色' }] }]" showSearch @change="selectChange">
							<template v-for="(item, index) in RoleList">
								<a-select-option :key="item.ID">{{ item.Name }}</a-select-option>
							</template>
						</a-select>
					</a-form-item>
					<a-form-item class="fixed-bottom">
						<a-button type="primary" @click="handleSubmit">{{ !currentID ? '确认添加' : '确认修改' }}</a-button>
						<a-button style="margin-left: 10px;" @click="closeFunction">取消</a-button>
					</a-form-item>
				</a-form>
			</div>
		</div>
	</div>
</template>

<script>
import { AddAdmin, UpdateAdmin, GetUserList } from '@/api/follow';
export default {
	props: {
		text: Object,
		RoleList: Array
	},
	watch: {
		text: function(text) {
			if (JSON.stringify(text) == '{}') {
				this.currentID=''
			} else {
				this.currentID = text.ID
				let RoleID1 = [],RoleID=''
				for(let i=0;i<text.RoleID.length;i++){
					RoleID1.push(text.RoleID[i].RoleID)
					RoleID = RoleID1.join(',')
				}
				setTimeout(()=> {
					this.form.setFieldsValue({
						UserNo: text.UserNo,
						RoleID1: RoleID1,
					});
				}, 300);
				this.RoleID = RoleID
				this.userList=[
					{
						Name: text.UserName,
						UserNo: text.UserNo,
					}
				]
			}
		}
	},
	data() {
		return {
			formLayout: 'horizontal',
			form: this.$form.createForm(this, {
				name: 'coordinated'
			}),
			userList: [],
			currentID:'',
			RoleID:''
		};
	},
	created() {},
	methods: {
		filterOption(input, option) {
			return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
		},
		selectChange(value) {
			this.RoleID = value.join(',');
		},
		async fetchUser(value) {
			let myReg = /^[^a-zA-Z]+$/;
			if (value && myReg.test(value) && value.length > 3) {
				let data = {};
				data.key = value;
				// data.type = 1;
				data.top = 20;
				let res = await GetUserList(data);
				this.userList = res.data.data;
			}
		},
		closeFunction(data) {
			this.form.resetFields();
			this.$emit('closeFun', data);
		},
		handleSubmit(e) {
			this.form.validateFields(async (err, values) => {
				if (!err) {
					let data = {};
					data = values
					data.id = this.currentID;
					data.RoleID = this.RoleID
					let res = {};
					if (JSON.stringify(this.text) == '{}') {
						res = await AddAdmin(data);
					} else {
						res = await UpdateAdmin(data);
					}
					if (res.data.code === 0) {
						this.$message.success(res.data.msg);
						this.closeFunction('1');
					} else {
						this.$message.error(res.data.msg);
					}
				}
			})
		}
	}
};
</script>

<style lang="less" scoped>
/deep/.ant-form-item {
	margin: 20px 50px;
}
/deep/.ant-form-item-label {
	width: 100px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: right;
}
/deep/.ant-form-item-control-wrapper {
	flex: 1;
}

.ant-form-item {
	margin-bottom: 10px;
}

/deep/.ant-form {
	margin-top: 50px;
	padding-bottom: 50px;
}
</style>
